<template>
    <div class="px-6">
        <el-form-item label="AI模型" prop="model">
            <div class="w-[560px]">
                <models-select
                    v-model="formData.llm_models"
                />
            </div>
        </el-form-item>
        <el-form-item label="角色词" prop="prompt_roles">
            <div class="w-[560px]">
                <el-input
                    v-model="formData.prompt_roles"
                    type="textarea"
                    :rows="6"
                    :placeholder="'固定的引导内容位于上下文开头，用于调整和引导聊天方向。' +
                        '通过修改该内容，可以控制对话的走向。如果您不了解，请留空，届时采用默认引导词。'"
                />
            </div>
        </el-form-item>
        <el-form-item label="限定词" prop="prompt_limit">
            <div class="w-[560px]">
                <el-input
                    v-model="formData.prompt_limit"
                    placeholder="请详细描述你的角色设定，例如：角色特点和能力"
                    type="textarea"
                    :rows="6"
                />
            </div>
        </el-form-item>
        <div class="w-[650px]">
            <template v-for="(conf, index) in formData.llm_config" :key="index">
                <template v-if="conf.type === 'slider'">
                    <el-form-item :label="conf.name" :prop="conf.key">
                        <div class="w-[100%] mb-4">
                            <el-slider
                                v-model="formData.llm_config[index].default"
                                :min="conf.range[0]"
                                :max="conf.range[1]"
                                :step="conf.step"
                                show-input
                            />
                        </div>
                    </el-form-item>
                </template>
                <template v-if="conf.type === 'switch'">
                    <el-form-item :label="conf.name" :prop="conf.key">
                        <el-switch v-model="formData.llm_config[index].default" />
                    </el-form-item>
                </template>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'

const props = defineProps<{
    modelValue: Record<string, any>
}>()

const emits = defineEmits<{
    (event: 'update:modelValue', value: Record<string, any>): void
}>()

const formData = useVModel(props, 'modelValue', emits)
</script>
